<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>左右移动</title>
<style>
select{
width: 70px;height: 150px;
}
input[type=button]{width: 70px;}
#opt{margin: 90px 10px 0;}
.box{width: 80%;margin:0 auto;background-color: black;}
.box div{float: left;}

</style>

</head>
<body>
<div class="box">
<div id="left">
<p>可选项</p>
<select multiple="multiple">
<option>增加</option>
<option>删除</option>
<option>修改</option>
</select>
</div>
<div id="opt">
<input id="toRight" type="button" value="增加" /><br>
<input id="toLeft" type="button" value="删除" /><br>
<input id="toAllRight" type="button" value="增加全部" /><br>
<input id="toAllLeft" type="button" value="删除全部" /><br>
</div>
<div id="right">
<p>已选项</p>
<select multiple="multiple">

</select>
</div>
</div>
<script>
//调入口函数
$(function(){
//增加

$('#toRight').click(function(){
//在 id=right中 里找到 select
$('#right>select').append($('option:selected'))
})
//删除
$('#toLeft').click(function(){
$('#left>select').append($('option:selected'))
})
//增加全部
$('#toAllRight').click(function(){
$('#right>select').append($('option'))
})
//删除全部
$('#toAllLeft').click(function(){
$('#left>select').append($('option'))
})
// //双击选择器 左边双击 跳到右边
// $('#left>select>option').dblclick(function(){
// 	// $('#right>select').append($('option:selected'))
// 		$('#right>select').append($(this))
// })


//双击返回左边 option只在左边添加 
$('option').dblclick(function(){
// console.log($(this).parent().parent()[0].id)
// console.log($(this).parent().parent().prop('id'))

var k=$(this).parent().parent().prop('id')=='left'
var select=k ? $('#right>select'):$('#left>select')
select.append($(this));

// k ? $('#left>select').append($(this):$('right'))...
})




// $('#right>select>option').dblclick(function(){
// 		$('#left>select').append($(this))
// })
// $('#left>select>option').dblclick(function(){
// 	console.log($(this).parent().parent()[0].id)
// })
})	


</script>



</body>
</html>
